<template>
	<view class="ui-avatar-stack"><slot></slot></view>
</template>

<script>
export default {
	name: 'UiAvatarGroup',
	data() {
		return {};
	},
	props: {
		bg: {
			type: String,
			default: 'ui-BG'
		},
		ui: {
			type: String,
			default: ''
		},
		stack: {
			type: Boolean,
			default: false
		},
		reverse: {
			type: Boolean,
			default: false
		}
	},
	methods: {}
};
</script>

<style lang="scss">
.ui-avatar-stack {
	display: inline-block;
	&.reverse {
		direction: rtl;
		unicode-bidi: bidi-override;
		& .ui-avatar {
			margin-right: -1em;
		}
		& .ui-avatar:first-child {
			margin-right: 0;
		}
		& .ui-avatar:last-child {
			margin-right: -1em;
		}
	}
	& .ui-avatar {
		margin-right: -1em;
		background-color: inherit;
		z-index: 1;
		&::after {
			content: '';
			background-color: inherit;
			transform: scale(1.1);
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
		&::after {
			border-radius: #{$radius};
		}

		&.round::after {
			border-radius: $round-pill;
		}

		&.ellipse::after {
			border-radius: 0px;
			mask-image: url();
			mask-size: cover;
		}
	}
	& .ui-avatar:last-child {
		margin-right: 0;
	}
}
.ui-avatar-group {
	display: inline-block;
	width: 100%;
	height: 100%;
	image {
		position: relative;
		float: left;
		border-radius: #{$radius};
		margin: 1px;
	}
	/*1个*/
	&.nth-1 image {
		width: calc(100% - 2px);
		height: calc(100% - 2px);
	}
	/*2个*/
	&.nth-2 image {
		width: calc(50% - 2px);
		height: calc(50% - 2px);
	}
	&.nth-2 image:last-child {
		margin-left: calc(50% + 1px);
	}
	/*3个*/
	&.nth-3 image {
		width: calc(50% - 2px);
		height: calc(50% - 2px);
		float: left;
	}
	&.nth-3 image:first-child {
		margin-left: calc(25% + 1px);
	}
	/*4个*/
	&.nth-4 image {
		width: calc(50% - 2px);
		height: calc(50% - 2px);
		float: left;
	}
	/*5/6个*/
	&.nth-5 image,
	&.nth-6 image {
		width: calc(100% / 3 - 2px);
		height: calc(100% / 3 - 2px);
	}
	&.nth-5 image:first-child,
	&.nth-6 image:first-child {
		width: calc(100% / 3 * 2 - 2px);
		height: calc(100% / 3 * 2 - 2px);
	}
	/* 7个 8个 9个 */
	&.nth-7 image,
	&.nth-8 image,
	&.nth-9 image {
		width: calc(100% / 3 - 2px);
		height: calc(100% / 3 - 2px);
	}
	&.nth-7 image:first-child {
		margin-left: calc(100% / 3 + 1px);
		margin-right: calc(100% / 3 + 1px);
	}
	&.nth-8 image:first-child {
		margin-left: calc(100% / 3 / 2 + 1px);
	}
}
</style>
